<template>
  <div class="page page-notice-details">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">返回</span>
          </a>
        </div>
        <div class="title">{{title}}</div>
      </div>
    </div>
    <div class="page-content ">

      <div class="block block-strong notice-details-title">
        {{title}}
      </div>
      <div class="card notice-details-content demo-facebook-card">
        <div class="card-header">
          <div class="demo-facebook-avatar"><img src="" width="40" height="40"/></div>
          <div class="demo-facebook-name">发布者:<span></span></div>
          <div class="demo-facebook-date">
            <span class="time-date"></span>
            <span class="view-count"></span>
          </div>
        </div>
        <div class="card-content card-content-padding">
        </div>
      </div>
    </div>
  </div>


</template>
<style>
.notice-details-title{
  font-size: 18px;
  color: #111;
}
.notice-details-content{
  margin: 0 !important;
  box-shadow:  none !important;
  font-size: 16px;
  color: #000;
}
.demo-facebook-card .card-header {
  display: block;
  padding: 10px;
}
.demo-facebook-card .demo-facebook-avatar {
  float: left;
}
.demo-facebook-card .demo-facebook-name {
  margin-left: 50px;
  font-size: 14px;
}
.demo-facebook-card .demo-facebook-date {
  margin-left: 50px;
  font-size: 13px;
  color: #8e8e93;
  overflow: auto;
}
.demo-facebook-card .demo-facebook-date .time-date{
  float: left;
  padding-left: 15px;
  background: url("./imgs/notice/time.png") no-repeat 0px center;
  background-size: 12px;
}
.demo-facebook-card .demo-facebook-date .view-count{
  float: right;
  margin-right: 16px;
  padding-left: 15px;
  background: url("./imgs/notice/view.png") no-repeat 0px center;
  background-size: 12px;
}
</style>
<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this);
    },
    created() {
      console.log('componentCreated', this);
    },
    beforeMount() {
      console.log('componentBeforeMount', this);

    },
    mounted() {
      console.log('componentMounted', this);
      console.log('组件转载完成，拿全局变量中的用户信息去查询后台', this.$root.user);
      app.preloader.show();
      setTimeout(function () {
        this.details = {
          user:'詹飞',
          time:'2017/06/04 11:11:11',
          view:'127',
          userImgSrc:'./imgs/notice/user.png',
          content:'大家好：\n' +
          '          水投之家今日晚间进行了系统更新并发布了新版本，本次更新范围包括ios版、安卓版、以及PC上的windows系统版本。请大家进行各客户端的设置功能中进行新版本的升级。\n' +
          '          本次更新的主要内容包括：\n' +
          '          Windows：\n' +
          '          1.更新登录界面；\n' +
          '          2.调整“搜索栏”及”加号“位置；\n' +
          '          3.左边栏头像下方去掉姓名显示，功能只保留图标，去掉文字，并加入鼠标移动至图标后显示其内容'
        };
        this.updataNoticeDetailView();
        app.preloader.hide();//打开加载器
      }.bind(this),1000)
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);

    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        title: this.$route.params.title,
        id: this.$route.params.id,
        details:{
          user:'',
          time:'',
          view:'',
          content:''
        }
      }
    },
    // Component Methods
    methods: {
      updataNoticeDetailView:function () {
        $$('.notice-details-content .demo-facebook-avatar>img').attr('src',this.details.userImgSrc);
        $$('.notice-details-content .demo-facebook-name>span').html(this.details.user);
        $$('.notice-details-content .demo-facebook-date .time-date').html(this.details.time);
        $$('.notice-details-content .demo-facebook-date .view-count').html(this.details.view);
        $$('.notice-details-content .card-content').html(this.details.content);
      }
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        console.log('pageMounted', page);
      },
      pageInit: function (e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        console.log('pageBeforeIn', page);
      },
      pageAfterIn: function (e, page) {
        console.log('pageAfterIn', page);
      },
      pageBeforeOut: function (e, page) {
        console.log('pageBeforeOut', page);
      },
      pageAfterOut: function (e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  };

</script>
